<template>
	<view class="content submitC">
		<view class="submit-info2 boxS">
			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>请假类型</text>
				</view>
				<view class="info2-right flex-right">
					<text style="color:#000">节假日预申请</text>
					<image src="../../static/img/more-ico2.png" mode=""></image>
				</view>
			</view>
			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>开始时间</text>
				</view>
				<view class="info2-right flex-right" @tap="openTime('start')">
					<text :style="startTime!=''?'color:#000':''">{{startTime!=''?startTime:'请选择'}}</text>
					<image src="../../static/img/more-ico2.png" mode=""></image>
				</view>
			</view>
			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>结束时间</text>
				</view>
				<view class="info2-right flex-right" @tap="openTime('end')">
					<text :style="endTime!=''?'color:#000':''">{{endTime!=''?endTime:'请选择'}}</text>
					<image src="../../static/img/more-ico2.png" mode=""></image>
				</view>
			</view>
			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>时长 (天)</text>
				</view>
				<view class="info2-right flex-right">
					<input type="text" :value="calTime" :disabled="true" placeholder="选择时间后自动计算" />
				</view>
			</view>

			<view class="info2-item">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>在岗状态</text>
				</view>
				<view class="info2-right flex-right" style="width: 100%;">
					<textarea :value="textInput" @input="inputText" placeholder="在岗状态：在队/休假。如都有，则填写（时间+在岗状态）"
						style="color: #000000;" />
				</view>
			</view>
		</view>


		<!-- 操作 -->
		<view class="detail-btn boxS flex-between">
			<view class="btn1 font32" hover-class="btns" @click="submitInfo">
				提交
			</view>
		</view>

		<w-picker :visible.sync="shortTermVisible" startYear="2017" endYear="2029" :value="nowTime" :current="false"
			fields="minute" @confirm="onConfirm($event,'date1')" @cancel="onCancel" :disabled-after="false"
			ref="shortTerm"></w-picker>



	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	import moment from 'moment'
	export default {
		components: {
			lzLoading
		},
		data() {
			return {
				index: '',
				value: '',
				shortTermVisible: false,
				result: {
					result: ""
				},
				sTime: '',
				startTime: '',
				endTime: '',
				textInput: '', //事由

				typeid: '', //申请id
				processList: '', //审批列表 
				showLoading: true,

				calTime: '', // 时长
				userInfo: {},
				imgList: [], //图片列表
				successor_id: '', //接替人id 接替人名字
				successor_name: '', //接替人名字
				name: '',
				personList: [],
			};
		},
		computed: {
			nowTime() {
				return this.$util.formatTime('now', 'Y-M-D h:m')
			},
			// userInfo(){
			// 	return uni.getStorageSync("USERINFO")
			// }
		},

		onLoad(options) {
			this.typeid = options.id
		},
		onShow() {
			this.userInfo = uni.getStorageSync("USERINFO")
		},

		methods: {

			//表单提交
			submitInfo() {
				if (this.startTime == '') {
					uni.showToast({
						title: "请选择开始时间",
						icon: "none"
					})
					return
				}
				if (this.endTime == '') {
					uni.showToast({
						title: "请选择结束时间",
						icon: "none"
					})
					return
				}
				if (this.calTime == '') {
					uni.showToast({
						title: "结束时间应大于开始时间",
						icon: "none"
					})
					return
				}
				if (this.textInput == '') {
					uni.showToast({
						title: "请输入在岗状态",
						icon: "none"
					})
					return
				}

				uni.showLoading({
					title: "提交中"
				})
				this.$api.uploadFile(this.imgList, (resoult) => {
					//表单提交
					this.$api.holiday({
						started_at: this.startTime,
						ended_at: this.endTime,
						job_status: this.textInput,
					}, true, (res) => {
						uni.showToast({
							title: '提交成功',
						})
						let sett = setTimeout(() => {
							uni.navigateBack()
							clearTimeout(sett)
						}, 1000)
					})
					uni.hideLoading()
				})

				// 
			},


			//文字输入
			inputText(e) {
				this.textInput = e.detail.value
			},
			//图片上传成功
			select(res) {
				this.imgList.push(...res.tempFilePaths)

			},
			//移除图片
			deletes(res) {
				this.imgList.splice(res.tempFilePath, 1)
			},
			//图片上传进度
			progress(e) {
				console.log('上传进度', e)
			},
			//打开时间选择
			openTime(val) {
				this.shortTermVisible = true
				this.sTime = val
			},
			onConfirm(res, type) {
				this.result = res;
				console.log(res)
				if (this.sTime == 'start') {
					this.startTime = res.result
				} else {
					this.endTime = res.result
				}
				this.calculationTime()
			},
			onCancel() {

			},

			// 时间计算
			calculationTime() {
				if (this.startTime != '' && this.endTime != '') {
					if(this.endTime > this.startTime){
						this.calTime = moment(this.endTime).diff(this.startTime, 'day') + 1
					}else{
						uni.showToast({
							title: '结束时间大于开始时间',
							icon:'none'
						})
					}
					// this.$api.getDuration({
					// 	start_time: this.startTime,
					// 	end_time: this.endTime
					// }, true, (res) => {
					// 	this.calTime = res.work_day;
					// })
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		.submitC {
			padding-top: 30rpx;

			.info-default {
				color: red;
				margin-right: 5rpx;
			}

			.submit-info1 {
				background: #fff;
				padding: 15rpx 4%;

				.info1-item {
					padding: 15rpx 0;

					.info1-left {
						font-weight: 500;
						color: #454545;
					}

					.info1-right {
						textarea {
							background: #FAFAFA;
							width: 100%;
							padding: 30rpx;
							width: 92%;
							margin-top: 20rpx;
							min-height: 100rpx;
							border-radius: 10rpx;
							height: auto;
							color: #000000;
						}
					}

				}
			}

			.submit-info2 {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;

				.info2-item {
					padding: 30rpx 0;
					border-bottom: 1rpx solid #E6E6E6;

					&:last-child {
						border: none;
					}

					.info2-left {
						font-weight: 500;
						color: #454545;
					}

					.info2-right {
						width: 72%;
						color: #ABABAB;

						image {
							width: 12rpx;
							height: 19rpx;
							margin-left: 20rpx;
						}

						input {
							width: 100%;
							text-align: left;
							color: #000;
						}

						textarea {
							background: #FAFAFA;
							width: 100%;
							padding: 30rpx;
							width: 92%;
							margin-top: 20rpx;
							min-height: 100rpx;
							border-radius: 10rpx;
							height: auto;
						}
					}
				}
			}

			.submit-info3 {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;
				padding-bottom: 30rpx;

				.info3-title {
					padding: 30rpx 0;
					font-weight: bold;
					color: #454545;

					text {
						&:last-child {
							font-weight: 500;
							color: #787878;
							margin-left: 15rpx;
						}
					}
				}

				.info3-item {
					width: 140rpx;
					height: 140rpx;
					border: 1rpx solid #E6E6E6;
					border-radius: 7rpx;
					margin-left: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info3-upload {
					width: 140rpx;
					height: 140rpx;
					background: #FAFAFA;
					border: 1rpx solid #E6E6E6;
					border-radius: 7rpx;
					text-align: center;

					image {
						margin: auto;
						width: 43rpx;
						height: 43rpx;
					}

					text {
						display: block;
						color: #008AFF;
					}
				}
			}

			.detail-process {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;
				align-items: flex-start;
				padding-bottom: 150rpx;

				.process-title {
					padding: 30rpx 0;
				}

				.process-item {
					padding-bottom: 80rpx;
					position: relative;

					&:after {
						position: absolute;
						top: 100rpx;
						left: 40rpx;
						content: "";
						width: 3rpx;
						height: 60rpx;
						background: #E6E6E6;
						border-radius: 1rpx;
					}

					&:last-child {
						padding-bottom: 30rpx;

						&:after {
							background: none;
						}
					}

					.item-img {
						width: 88rpx;
						height: 88rpx;
						border-radius: 7rpx;
						margin-right: 30rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item-name {
						font-weight: bold;
						color: #454545;

						text {
							display: block;
							width: 100%;

							&:last-child {
								font-weight: 500;
								color: #454545;
								margin-top: 10rpx;
							}
						}
					}

					.item-state {
						margin-top: 20rpx;
					}

					.item-right {
						color: #ABABAB;
					}
				}
			}

			.detail-btn {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 92%;
				padding: 30rpx 4%;
				background: #fff;

				.btn1 {
					width: 100%;
					background: #008AFF;
					border-radius: 44rpx;
					text-align: center;
					font-weight: bold;
					color: #FFFFFF;
					padding: 20rpx 0;
				}
			}
		}
	}
</style>
